<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>添加应用系统</title>
	<#include "./comm/meta-base.ftl" />
	<#include "./comm/meta-easyui.ftl" />
	<#include "./comm/meta-comm.ftl" />
</head>
<body>
		
<form id="data_form" role="form" class="page-form"   method="post" >
 	<!--表单块-->
	<div class="form-title">应用系统信息</div>
	<div class="row">
		
		<div class="form-group col-sm-6 ">
			<label class="col-sm-4 fm-label">系统名称</label>
			<div class="col-sm-8 fm-control">
            	<!--需要验证的 class 设置为 easyui-validatebox data-options设置验证规则-->
				<input type="text" name="name" value="${upmsAppSystemPO.name}" class="form-control easyui-validatebox" data-options="required:true" />
				<input type="hidden" name="appSystemId"  value="${upmsAppSystemPO.appSystemId}"/>
			</div>
		</div>
		
		<div class="form-group col-sm-6">
			<label class="col-sm-4 fm-label">系统图标</label>
			<div class="col-sm-8 fm-control" style="">
				<span class="input-icon icon-left">
					<input type="text" name="icon" class="form-control easyui-validatebox" data-options="required:true"  value="${upmsAppSystemPO.icon}" onchange="changeIcon(this)" />
					<i class="fa fa-th"></i>
				</span>

			</div>
		</div>
	
	</div>
	
	<div class="row">
		
		<div class="form-group col-sm-6 ">
			<label class="col-sm-4 fm-label">系统颜色</label>
			<div class="col-sm-8 fm-control">
				<input type="text" name="color"  class="form-control colorpicker" data-position="required:true" value="${upmsAppSystemPO.color}" />
			</div>
		</div>
	
	</div>
	
	
	
	<div class="form-title">应用部署信息</div>
	<div class="row">
		<div class="buttons-preview" style="border:0px;" >
			<a class="btn btn-default  btn-sm" 
            	href="javascript:addApp()"><i class="fa fa-plus"></i>新增应用</a>
		</div>
	   
		<table class="table   table-bordered ">
			<thead>
				<tr>
					<th width="300">应用名称</th>
					<th width="300">应用服务名</th>
					<th width="50">端口</th>
					<th >操作</th>
				</tr>
			</thead>
			<tbody id="app-tbody">
			<#list upmsAppPOList as upmsAppPO>
				<tr>
					<input name="appIdArray" value="${upmsAppPO.appId}" type="hidden"/>
					<td><input type="text"  value="${upmsAppPO.name}" name="appNameArray" class="form-control easyui-validatebox validatebox-text validatebox-invalid" 
					data-options="required:true" style="height:28px;width:290px;"></td>
					
					<td><input type="text" name="appServerNameArray" value="${upmsAppPO.appServerName}" class="form-control easyui-validatebox validatebox-text validatebox-invalid" 
					data-options="required:true" style="height:28px;width:290px;"></td>
					
					<td><input type="text" name="appPortArray" value="${upmsAppPO.port}" class="form-control easyui-validatebox validatebox-text" 
					data-options="required:true,validType:'number'" value="80" style="height:28px;width:40px;"></td>
					
					<td><a class="btn btn-danger btn-xs icon-only white" onclick="removeApp(this,'${upmsAppPO.appId}')" href="javascript:void(0);">
					<i class="fa fa-times "></i></a></td>
				</tr>
			</#list>
			</tbody>
		</table>
		
	</div>
    
    <!--表单操作按钮区-->
    
    <div class="but-row-bottom-shadow"></div>
    <div class="buts-row-bottom row ">
		<a href="javascript:submitForm();"  class="btn btn-success">
				<i class="fa fa-check"></i>提 交</a>
		<a href="javascript:closeWindow('编辑应用系统');" class="btn btn-default">
				<i class="fa fa-times"></i>取 消</a>
	</div>
 </form>
</body>
</html>
<script type="text/javascript">
 //--jQuery MiniColors--
$('.colorpicker').each(function () {
    $(this).minicolors({
        control: $(this).attr('data-control') || 'hue',
        defaultValue: $(this).attr('data-defaultValue') || '',
        inline: $(this).attr('data-inline') === 'true',
        letterCase: $(this).attr('data-letterCase') || 'lowercase',
        opacity: $(this).attr('data-opacity'),
        position: $(this).attr('data-position') || 'bottom left',
        change: function (hex, opacity) {
            if (!hex) return;
            if (opacity) hex += ', ' + opacity;
            try {
                console.log(hex);
            } catch (e) { }
        },
        theme: 'bootstrap'
    });

});

//提交表单
function submitForm(){
	$("#data_form").form('submit', {
		url : '${basePath}/app-system/app-system-update',
		onSubmit: function (){
			showPageShade();//当提交时候，显示遮罩层
			if(!$(this).form('validate')){//页面验证
				hiddenPageShade();//未成功，隐藏遮罩层
				return false;
			}
			return true;
        },
		success : function(result) {
			hiddenPageShade();//成功后，隐藏遮罩层
			closeWindowRefrresh("编辑应用系统");
		}
	});
}



function removeApp(obj,appId){
	 $.post("${basePath}/app-system/isAppUsed",{'appId':appId},function(data){
	    if(!data){
	    	$.post("${basePath}/app/app-remove",{'appId':appId},function(rt){
			    var $this=$(obj);
				$this.parent().parent().remove();
			  });
	    }else{
	    	Notify('该应用已被权限使用，不可删除!', 'top-right', '5000', 'danger', 'fa-bolt', true);
	    }
	  });

	
	
}
function addApp(){
	var html="<tr>"+
				"<input name=\"appIdArray\" value=\"default\" type=\"hidden\"/>"+
				"<td><input type=\"text\" name=\"appNameArray\" class=\" form-control easyui-validatebox\" data-options=\"required:true\" style=\"height:28px;width:290px;\"/></td>"+
				"<td><input type=\"text\" name=\"appServerNameArray\" class=\"form-control easyui-validatebox\" data-options=\"required:true\"  style=\"height:28px;width:290px;\"/></td>"+
				"<td><input type=\"text\" name=\"appPortArray\" class=\"form-control easyui-validatebox\" data-options=\"required:true,validType:'number'\" value=\"80\"  style=\"height:28px;width:40px;\"/></td>"+
				"<td><a class=\"btn btn-danger btn-xs icon-only white\" onclick=\"removeApp(this,'0')\" href=\"javascript:void(0);\"><i class=\"fa fa-times \"></i></a></td>"+
			"</tr>";
	$("#app-tbody").append(html);
	$.parser.parse($("#app-tbody"));
}
function changeIcon(obj){
	var $this=$(obj);
	var $i=$this.next("i.fa");
	var cls="fa "+$this.val();
	$i.attr("class",cls);
}
</script>


